<template>
  <div class="login">
    <div class="loginBg"></div>
    <div class="login_div">
      <div class="loginBox">
        <div class="loginWelcome">Welcome！</div>
        <div class="loginTitle">欢迎进入电子班牌管理平台</div>
        <div class="loginInputBox ">
          <div class="loginInput_li bx user">
            <input type="text" placeholder="用户名" v-model="user">
          </div>
          <div class="loginInput_li bx password">
            <input :type="typeText" placeholder="密码" v-model="password">
          </div>
          <div class="loginInput_li bx loginChooseBox " :class="selectFlag?'selected':'noSelected'" @click='changeSelect'>
            记住密码
          </div>
        </div>
        <el-button type="primary" class="loginBtn" :loading="loginFlag" @click="login">登陆</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    http
  } from "../../api/config";
  import CryptoJS from 'crypto-js/crypto-js';
  export default {
    name: 'login',
    data() {
      return {
        loginFlag: false, //登陆阀
        selectFlag: false, //记住密码阀门
        user: '', //账户名
        password: '', //密码名
        typeText: 'text'
      }
    },
    methods: {
      changeTypeText() {
        this.typeText = 'password';
      },
      login() { //登陆模块
        var _this = this;

        if (_this.trim(_this.user) === '') { //非空验证
          this.$message.error('账号不能为空');
          return;
        } else if (_this.trim(_this.password) === '') {
          this.$message.error('密码不能为空');
          return;
        }

        setTimeout(() => {
          _this.changeTypeText = 'text';
          _this.$router.push({ //跳转首页
            path: '/home'
          });
        }, 500)
        // return

      },
      changeSelect() {
        this.selectFlag = !this.selectFlag; //改变登录状态
        // this.saveData();//登陆正确，再记录密码  打开注释则点击立马记录密码
      },
      saveData() {
        let _this = this;
        if (_this.selectFlag) { //如果是记录阀门是打开，则获取登陆信息并保存密码
          let lbPersonalData = {
            us: _this.user,
            pa: _this.password
          }
          //可以插入加密
          localStorage.setItem('personalData', JSON.stringify(personalData));
        } else { //否则移除密码
          localStorage.removeItem('personalData');
        }
      },
      checkLoginStatus() { //检测登陆
        let token = localStorage.getItem('token');
        if (token) {
          this.$router.push({
            path: '/home'
          });
        } else {

        }
      },
      checkSelect() { //检测记录密码
        let personalData = localStorage.getItem('personalData');
        if (personalData) {
          this.selectFlag = true;
          personalData = JSON.parse(personalData);
          this.user = personalData.us;
          this.password = personalData.pa;
        } else {
          this.selectFlag = false;
        }
      }
    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      })

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login {
    width: 100%;
    height: 100%;
    /* background: red; */
    /* display: flex; */
    position: relative;
  }

  .loginBg {
    width: 1298px;
    margin-right: 622px;
    height: 100%;
    background: url('../../../static/images/loginBg.png');
  }

  .login_div {
    width: 622px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: #fff;
  }

  .loginBox {
    width: 435px;
    height: 514px;
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    text-align: left;
  }

  .loginWelcome {
    font-size: 40px;
    line-height: 40px;
    color: #36aff2;
  }

  .loginTitle {
    font-size: 36px;
    line-height: 36px;
    color: #1985ce;
    margin-top: 24px;
  }

  .loginInputBox {
    margin-top: 66px;
  }

  .loginInput_li {
    width: 100%;
    height: 56px;
    border: 1px solid #e0e0e0;
    border-radius: 28px;
    padding: 0 28px 0 66px;
    margin-bottom: 38px;
    position: relative;

  }

  .loginInput_li.user:after {
    content: '';
    width: 25px;
    height: 28px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../../../static/images/user.png');
  }

  .loginInput_li.password:after {
    content: '';
    width: 22px;
    height: 28px;
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../../../static/images/password.png');
  }

  .loginChooseBox {
    border: 0;
    margin: 0;
    line-height: 56px;
    font-size: 16px;
    color: #6d6d6d;
    cursor: pointer;
  }

  .loginInput_li.selected::after {
    content: '';
    width: 29px;
    height: 29px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../../../static/images/selected.png');
  }

  .loginInput_li.noSelected::after {
    content: '';
    width: 29px;
    height: 29px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../../../static/images/noSelected.png');
  }

  .loginInput_li input {
    width: 100%;
    /* height: 100%; */
    height: 52px;
    border: none;
    outline: none;
    font-size: 20px;
    color: #b9b9b9;
  }

  .loginBtn {
    margin-top: 28px;
    width: 100%;
    height: 56px;
    background: #1985ce;
    color: #fff;
    font-size: 28px;
    border-radius: 28px;
    line-height: 56px;
    text-align: center;
    box-shadow: 0 26px 26px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 0;

  }

</style>
